<!--帖子管理-->
<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" placeholder="标题" v-model="postMhcData.releaseTitle"></el-input>
        <el-select v-model="postMhcData.recommend" placeholder="全部" style="margin-left: 20px">
          <el-option label="全部" :value=2></el-option>
          <el-option label="推荐" :value=0></el-option>
          <el-option label="不推荐" :value=1></el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" style="margin-left: 20px" @click="checkButton()"></el-button>
        <!--表格-->
        <el-table :data="postsData" height="250" border style="margin-top: 10px;width: 100%">
          <el-table-column prop="releaseTitle" label="发布标题" width="180" :show-overflow-tooltip='true' ></el-table-column>
          <el-table-column prop="releaseTime" label="发布时间" width="180"></el-table-column>
          <el-table-column prop="releaseContent" label="发布内容" width="180" :show-overflow-tooltip='true' ></el-table-column>
          <el-table-column prop="releasePicture" label="相关图片" width="180">
            <template slot-scope="scope">
              <el-image style="width: 70px;" :src="scope.row.releasePicture">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="推荐" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.recommend == 0">
                是
              </span>
              <span v-if="scope.row.recommend == 1">
                否
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="fabulousCount" label="点赞量" width="150"></el-table-column>
          <el-table-column prop="browseCount" label="浏览量" width="150"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <span><el-button type="text" @click="see(scope.row)">查看</el-button></span>
              &nbsp;&nbsp;&nbsp;
              <span><el-button type="text" @click="openDel(scope.row.postsNumber)">删除</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="postMhcData.pageNum"
        :page-sizes="[8, 10, 15, 20]"
        :page-size="postMhcData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->
<!--    查看详情弹窗-->
    <el-dialog title="查看详情" :visible.sync="detailsVisible">
      <el-form :model="alone">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="alone.releaseTitle" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="发布时间" :label-width="formLabelWidth">
          <el-input v-model="alone.releaseTime" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="发布内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="alone.releaseContent" readonly></el-input>
        </el-form-item>
        <el-form-item label="相关图片" :label-width="formLabelWidth">
          <el-image :src="alone.releasePicture" readonly></el-image>
        </el-form-item>
        <el-form-item label="点赞量" :label-width="formLabelWidth">
          <el-input v-model="alone.fabulousCount" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="浏览量" :label-width="formLabelWidth">
          <el-input v-model="alone.browseCount" autocomplete="off" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
<!--    查看详情弹窗-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      // 全查表格数据
      postsData:[],
      // 帖子模糊查数据
      postMhcData:{
        // 标题
        releaseTitle: '',
        // 是否推荐
        recommend: 2,
        // 当前页数
        pageNum: 1,
        // 每页的数据条数
        pageSize: 10
      },
      // 全查数据总条数
      total: 0,
      // 查看详情弹窗开/关
      detailsVisible:false,
      formLabelWidth: '120px',
      // 查看单跳帖子的对象
      alone:{},
    }
  },
  /*自动挂载*/
  mounted() {
    // 帖子全查、分页
    this.postsCheck();
  },
  /*函数*/
  methods:{
    // 帖子全查、模糊查、分页
    postsCheck(){
      this.$axios.post("/memberWlj/posts/postsCheck", this.postMhcData)
        .then(res => {
          // console.log(res)
          if(res.status === 200){
            this.postsData = res.data.obj.msg
            this.total = res.data.obj.total
          }else{
            this.$notify({
              title: '错误',
              message: '查询错误',
              type: 'error'
            })
           }
        })
    },
    // 分页
    handleSizeChange(ps) {
      console.log("size::::" + ps)
      this.postMhcData.pageSize = ps
      this.postsCheck()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(ps) {
      console.log("current::::::" + ps)
      this.postMhcData.pageNum = ps
      this.postsCheck()
      // console.log(`当前页: ${val}`);
    },
    // 查看
    see(row){
      this.alone = row
      // 开启查看弹窗
      this.detailsVisible = true
    },
    // 查询按钮
    checkButton(){
      // 调用全查
      this.postsCheck()
      // 清空模糊查信息
      this.emptyMhcData()
    },
    // 清空模糊查信息
    emptyMhcData(){
      this.postMhcData.recommend = 2
      this.postMhcData.releaseTitle = ''
      this.postMhcData.pageNum = 1
      this.postMhcData.pageSize = 10
    },
    // 删除弹窗
    openDel(postsNumber) {
      this.$confirm('此操作将永久删除该帖子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定
        this.$axios.post("/memberWlj/posts/deletePosts/" + postsNumber)
          .then(res => {
            // 日志
            this.insertLog("删除帖子")
            if(res.status === 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 成功后走全查
              this.postsCheck()
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            }
          })
      }).catch(() => {
        // 点击取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>